import * as THREE from 'three'
import { RenderTargetTool } from 'libora'
import { Stage } from '../jsm/Stage.js'

window.THREE = THREE;

export class HelloBox {
  constructor(stage) {
    const renderTargetHelper = new RenderTargetTool({
      canvasClassName: ".debugger-canvas"
    })
    const box1 = this.getBox(10);
    stage.scene.add(box1)

    const { renderer, camera, scene } = stage;

    const targetRed = new THREE.WebGLRenderTarget(
      window.innerWidth,
      window.innerHeight
    )
    const overrideMaterial = new THREE.MeshBasicMaterial();
    overrideMaterial.color.setStyle("#ff0000")

    stage.onUpdate(() => {
      scene.overrideMaterial = overrideMaterial;
      renderer.setRenderTarget(targetRed)
      renderer.render(scene, camera)
      renderTargetHelper.renderToCanvas(renderer, targetRed)

      box1.material.map = targetRed.texture;
      box1.material.needsUpdate = true;

      scene.overrideMaterial = null;
      renderer.setRenderTarget(null)
      renderer.render(scene, camera)
    })
  }

  getBox(size) {
    var geometry = new THREE.BoxGeometry(size, size, size);
    var material = new THREE.MeshBasicMaterial({
    })
    var cube = new THREE.Mesh(geometry, material);
    cube.name = "test_cube"
    return cube;
  }
}

window.onload = () => {
  const stage = new Stage("#app");
  window.stage = stage;
  new HelloBox(stage);
};
